<template>
    <div class="container">
        <div class="login">
            <div class="bg">
                <img src="@/assets/imgs/bg.png" alt="">
            </div>
            <div class="form">
                <div class="title">账号登录</div>
                <div class="tel">
                        <el-input prefix-icon="el-icon-user" placeholder="请输入密码" v-model="account" maxlength="11">
                        </el-input>
                        <!-- <input class="text" v-model="account" placeholder="请输入手机号" type="text" > -->
                </div>
                <div class="tel">
                        <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="password" show-password>
                        </el-input>
                        <!-- <input class="text" v-model="password" placeholder="请输入短信验证码" type="text" /> -->
                </div>
                <div class="protocol">
                    <span>阅读并接受<a @click.stop.prevent="toServiceProtocol">《服务条款》</a> 和<a @click.stop.prevent="toPrivacyPolicy">《隐私协议》</a></span>
                </div>
                <el-button class="button" @click="login" type="primary">登录</el-button>
                <!-- <div>登录</div> -->
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Login',
        data() {
            return {
                account: '',
                password: ''
            }
        },
        methods: {
            toServiceProtocol() {},
            toPrivacyPolicy() {},
            login() {},
        }
    }
</script>
<style lang="less" scoped>
    .container{
        height: 100%;
        background: #fff;
    }
    .login{
        width: 1220px;
        height: 100%;
        margin: 0 auto;
        position: relative;
        .bg {
            text-align: center;
            position: absolute;
            width: 750px;
            height: 640px;
            top: 50%;
            margin-top: -320px;
            img{
                width: 400px;
            }
        }
        .form{
            width: 320px;
            // height: 488px;
            top: 50%;
            left: 50%;
            margin-top: -244px;
            margin-left: 160px;
            text-align: left;
            position: absolute;
            border-radius: 12px;
            background-image: linear-gradient(-180deg, #fff, #f4f4f4);
            box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
            text-align: center;
            padding: 30px 40px 30px;
            .title{
                font-family: PingFangSC-Semibold;
                font-size: 20px;
                color: #202020;
                line-height: 28px;
            }
        }
    }
    // .form {
        //     background: #fff;
        //     padding: 55px 40px;
        //     width: 300px;
        //     position: absolute;
        //    top:50%;
        //    left:50%;
        //     transform: translateX(-50%) translateY(-50%);
        //     .title{
            //         font-family: PingFangSC-Semibold;
            //         font-size: 20px;
            //        color: #202020;
            //         line-height: 28px;
            //      }
            //   }
    .tel{
        display: flex;
        margin-top: 32px;
        border-radius: 2px;
        padding: 14px 0;
        .area-code{
            width: 46px;
            border-right: 1px solid  #D8D8D8;
            text-align: center;
            line-height: 22px;
            font-size: 14px;
            color: #202020;
        }
        .input{
            height: 22px;
            width:211px;
            padding-left: 19px;
        }
        .text{
            font-size: 14px;
            height: 100%;
            line-height: 22px;
            width: 100%;
            color: #202020;
            background: #F3F4F9;
        }
    }
    .protocol{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        margin-top: 34px;
        display: flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        img{
            margin-right: 8px;
            width: 16px;
            height: 16px;
        }
        a{
            color: #3E91FF;
            text-decoration: none;
        }
    }
    .button{
        width: 100%;
        margin: 16px auto;
    }
</style>
